<template>
  <div>
    <div class="main" ref="main"></div>
  </div>
</template>

<script>
// 导入echarts
import * as echarts from "echarts";
export default {
  data() {
    return {
      totalTypePrice: [],
    };
  },
  async mounted() {
    // 获取每种房型的销售额
    let res = await this.$get("/roomType/totalTypePrice");
    this.totalTypePrice = res.data;
    console.log(this.totalTypePrice);
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "客房类型销售统计",
      },
      tooltip: {},
      xAxis: {
        data: this.totalTypePrice.map((r) => r.roomTypeName),
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: this.totalTypePrice.map((r) => r.totalMoney),
        },
      ],
    });
  },
};
</script>
<style scoped lang="scss">
.main {
  width: 600px;
  max-width:1000px;
  height: 500px;
  padding: 20px;
}
</style>